define(function() {

    const  { html, Component, render } = preact;
    
    class Dialog extends Component {

        constructor(props){
            super(props);
            this.state = {
                // hello: 'world',
                classState : ''
            }

            // console.log(this.props)

            this.close = this.close.bind(this);
        }


        componentDidMount(){
            this.setState({
                classState: 'mount'
            })
            // console.log(this);
        }

        close(){
            const self = this;
            const root = self.base;
            const close = self.props.close || (()=>{});
            close();

            // root.addEventListener("webkitAnimationEnd", (function(e) {
            //     if(e.target === root){
            //         console.log('close')
            //         close();
            //     }
            // }).bind(this), {once:true})

            // self.setState({
            //     classState: ''
            // })

        }

        render(props, state) {//props, state

            // console.log(props);
            const { 
                overlay=true,
                closebtn=true,
                header,
                footer,
                width="",
                height="",
                contentStyle={},
                close=()=>{}
            } = props;
            
            // contentStyle = {};
            width && (contentStyle.width = width);
            height && (contentStyle.height = height)

            // return ReactDOM.createPortal(
            //     this.props.children,
            //     this.el,
            //   );
            // ...${props}
            // console.log(props);

            return html`
            <div class=${'dialog '+(props.class||'')+' '+ (state.classState||'')}>
                ${overlay && html`<div class="dialog-overlay"></div>`}
                <div class="dialog-content" style=${contentStyle}>
                    <div class="dialog-common">
                        <div class="dialog-header">${header}</div>
                        <div class="dialog-body">
                            ${props.children}
                        </div>
                        <div class="dialog-footer">${footer}</div>
                    </div>
                    ${closebtn && html`<div onClick=${this.close} class="dialog-closed">X</div>`}
                </div>
            </div>
            `
        }

    }

    return Dialog;
    
 });